<template>
  <page-wraper :use-wx-ad="false" :use-reward-fab="true">
    <view class="page">
      <view class="page__hd">
        <view class="page__title">
          <view class="logo"></view>
          <view class="inline">
            Wot UI
            <text class="version">@{{ packageConfig.version }}</text>
          </view>
        </view>
        <view class="page__desc">
          {{
            $t(
              'wot-design-uni-shi-yi-ge-ji-yu-vue3ts-kai-fa-de-uniapp-zu-jian-ku-ti-gong-70-gao-zhi-liang-zu-jian-zhi-chi-an-hei-mo-shi-guo-ji-hua-he-zi-ding-yi-zhu-ti'
            )
          }}
        </view>
      </view>
      <view class="page__bd">
        <block v-for="(item, index) in list" :key="index">
          <view class="kind-list__item">
            <view :id="item.id" class="wd-flex kind-list__item-hd" @click="kindToggle(item.id)">
              <view class="wd-flex__item title">{{ item.name }}</view>
              <image class="kind-list__img" :src="item.icon"></image>
            </view>
            <view :class="['kind-list__item-bd', openState[item.id] ? 'kind-list__item-bd_show' : '']">
              <view :class="['wd-cells', openState[item.id] ? 'wd-cells_show' : '']">
                <wd-cell
                  v-for="(page, j) in item.pages"
                  :key="j"
                  is-link
                  :label="page.name"
                  @click="handleClick(`/subPages/${page.id}/Index`)"
                ></wd-cell>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </page-wraper>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import packageConfig from '../../../package.json'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const imgModules: any = import.meta.glob('../images/*.png', { eager: true })

// 使用computed使list响应语言变化
const list = computed(() => [
  {
    id: 'widget',
    name: t('ji-chu'),
    open: false,
    icon: imgModules['../images/icon_nav_widget.png'].default,
    pages: [
      {
        id: 'button',
        name: t('button-an-niu')
      },
      {
        id: 'icon',
        name: t('icon-tu-biao')
      },
      {
        id: 'layout',
        name: t('layout-bu-ju')
      },
      {
        id: 'configProvider',
        name: t('configprovider-quan-ju-pei-zhi')
      },
      {
        id: 'popup',
        name: t('popup-dan-chu-ceng')
      },
      {
        id: 'resize',
        name: t('resize-jian-ting-yuan-su-chi-cun-bian-hua')
      },
      {
        id: 'transition',
        name: t('transition-dong-hua')
      },
      {
        id: 'fab',
        name: t('fab-xuan-fu-an-niu')
      },
      {
        id: 'text',
        name: t('text-wen-ben')
      },
      {
        id: 'rootPortal',
        name: t('rootportal-title')
      }
    ]
  },
  {
    id: 'nav',
    name: t('dao-hang'),
    open: false,
    icon: imgModules['../images/icon_nav_nav.png'].default,

    pages: [
      {
        id: 'pagination',
        name: t('pagination-fen-ye')
      },
      {
        id: 'popover',
        name: t('popover-qi-pao')
      },
      {
        id: 'tabs',
        name: t('tabs-biao-qian-ye')
      },
      {
        id: 'segmented',
        name: t('segmented-fen-duan-qi')
      },
      {
        id: 'tabbar',
        name: t('tabbar-biao-qian-lan')
      },
      {
        id: 'navbar',
        name: t('navbar-dao-hang-lan')
      },
      {
        id: 'sidebar',
        name: t('sidebar-ce-bian-lan')
      },
      {
        id: 'backtop',
        name: t('backtop-hui-dao-ding-bu')
      },
      {
        id: 'indexBar',
        name: t('indexbar-suo-yin-lan')
      }
    ]
  },
  {
    id: 'form',
    name: t('shu-ju-shu-ru'),
    open: false,
    icon: imgModules['../images/icon_nav_form.png'].default,
    pages: [
      {
        id: 'calendar',
        name: t('calendar-ri-li-xuan-ze-qi')
      },
      {
        id: 'calendarView',
        name: t('calendarview-ri-li-mian-ban')
      },
      {
        id: 'checkbox',
        name: t('checkbox-fu-xuan-kuang')
      },
      {
        id: 'colPicker',
        name: t('colpicker-duo-lie-xuan-ze-qi')
      },
      {
        id: 'datetimePicker',
        name: t('datetimepicker-shi-jian-xuan-ze-qi')
      },
      {
        id: 'datetimePickerView',
        name: t('datetimepickerview-shi-jian-xuan-ze-qi-shi-tu')
      },
      {
        id: 'input',
        name: t('input-shu-ru-kuang')
      },
      {
        id: 'textarea',
        name: t('textarea-wen-ben-yu')
      },
      {
        id: 'inputNumber',
        name: t('inputnumber-ji-shu-qi')
      },
      {
        id: 'picker',
        name: t('picker-xuan-ze-qi')
      },
      {
        id: 'pickerView',
        name: t('pickerview-xuan-ze-qi-shi-tu')
      },
      {
        id: 'radio',
        name: t('radio-dan-xuan-kuang')
      },
      {
        id: 'rate',
        name: t('rate-ping-fen')
      },
      {
        id: 'search',
        name: t('search-sou-suo')
      },
      {
        id: 'selectPicker',
        name: t('selectpicker-dan-fu-xuan-xuan-ze-qi')
      },
      {
        id: 'slider',
        name: t('slider-hua-kuai')
      },
      {
        id: 'switch',
        name: t('switch-kai-guan')
      },
      {
        id: 'form',
        name: t('form-biao-dan')
      },
      {
        id: 'upload',
        name: t('upload-shang-chuan')
      },
      {
        id: 'passwordInput',
        name: t('passwordinput-mi-ma-shu-ru-kuang')
      },
      {
        id: 'signature',
        name: t('signature-qian-ming')
      }
    ]
  },
  {
    id: 'feedback',
    name: t('fan-kui'),
    open: false,
    icon: imgModules['../images/icon_nav_feedback.png'].default,
    pages: [
      {
        id: 'actionSheet',
        name: t('actionsheet-shang-la-cai-dan')
      },
      {
        id: 'dropMenu',
        name: t('dropmenu-xia-la-cai-dan')
      },
      {
        id: 'floatingPanel',
        name: t('floatingpanel-fu-dong-mian-ban')
      },
      {
        id: 'loading',
        name: t('loading-jia-zai-zhi-shi-qi')
      },
      {
        id: 'messageBox',
        name: t('messagebox-dan-kuang')
      },
      {
        id: 'overlay',
        name: t('overlay-zhe-zhao-ceng')
      },
      {
        id: 'noticeBar',
        name: t('noticebar-tong-zhi-lan')
      },
      {
        id: 'progress',
        name: t('progress-jin-du-tiao')
      },
      {
        id: 'circle',
        name: t('circle-huan-xing-jin-du-tiao')
      },
      {
        id: 'sortButton',
        name: t('sortbutton-pai-xu-an-niu')
      },
      {
        id: 'statusTip',
        name: t('statustip-que-sheng-ti-shi')
      },
      {
        id: 'swipeAction',
        name: t('swipeaction-hua-dong-cao-zuo')
      },
      {
        id: 'toast',
        name: t('toast-qing-ti-shi')
      },
      {
        id: 'notify',
        name: t('notify-xiao-xi-tong-zhi')
      },
      {
        id: 'tooltip',
        name: t('tooltip-wen-zi-ti-shi')
      },
      {
        id: 'countDown',
        name: t('countdown-dao-ji-shi')
      },
      {
        id: 'countTo',
        name: t('countto-shu-zi-gun-dong')
      },
      {
        id: 'keyboard',
        name: t('keyboard-xu-ni-jian-pan')
      },
      {
        id: 'numberKeyboard',
        name: t('numberkeyboard-shu-zi-jian-pan')
      }
    ]
  },
  {
    id: 'show',
    name: t('shu-ju-zhan-shi'),
    open: false,
    icon: imgModules['../images/icon_nav_show.png'].default,
    pages: [
      {
        id: 'badge',
        name: t('badge-hui-biao')
      },
      {
        id: 'card',
        name: t('card-ka-pian')
      },
      {
        id: 'cell',
        name: t('cell-dan-yuan-ge')
      },
      {
        id: 'collapse',
        name: t('collapse-zhe-die-mian-ban')
      },
      {
        id: 'curtain',
        name: t('curtain-mu-lian')
      },
      {
        id: 'divider',
        name: t('divider-fen-ge-xian')
      },
      {
        id: 'gap',
        name: t('gap-jian-ge-cao')
      },
      {
        id: 'img',
        name: t('img-tu-pian')
      },
      {
        id: 'imgCropper',
        name: t('imgcropper-tu-pian-cai-jian')
      },
      {
        id: 'grid',
        name: t('grid-gong-ge')
      },
      {
        id: 'loadmore',
        name: t('loadmore-jia-zai-geng-duo')
      },
      {
        id: 'skeleton',
        name: t('skeleton-gu-jia-ping')
      },
      {
        id: 'steps',
        name: t('steps-bu-zhou-tiao')
      },
      {
        id: 'sticky',
        name: t('sticky-xi-ding-bu-ju')
      },
      {
        id: 'tag',
        name: t('tag-biao-qian')
      },
      {
        id: 'watermark',
        name: t('watermark-shui-yin')
      },
      {
        id: 'swiper',
        name: t('swiper-lun-bo-tu')
      },
      {
        id: 'table',
        name: t('table-biao-ge')
      }
    ]
  }
])

function handleClick(url: string) {
  uni.navigateTo({
    url
  })
}

// 创建一个状态来跟踪每个分类的打开状态
const openState = ref<Record<string, boolean>>({})

function kindToggle(id: string) {
  openState.value[id] = !openState.value[id]
}

onShareAppMessage(() => {
  return {
    title: t('yi-ge-ji-yu-vue3ts-de-uniapp-zu-jian-ku-ti-gong-70-gao-zhi-liang-zu-jian-zhi-chi-an-hei-mo-shi-guo-ji-hua-he-zi-ding-yi-zhu-ti'),
    path: '/pages/index/Index',
    imageUrl: imgModules['../images/share.png'].default
  }
})

onShareTimeline(() => {
  return {
    title: t('yi-ge-ji-yu-vue3ts-de-uniapp-zu-jian-ku-ti-gong-70-gao-zhi-liang-zu-jian-zhi-chi-an-hei-mo-shi-guo-ji-hua-he-zi-ding-yi-zhu-ti-0'),
    path: '/pages/index/Index',
    imageUrl: imgModules['../images/share.png'].default
  }
})
</script>

<style lang="scss" scoped>
.wot-theme-dark {
  .page__hd,
  .kind-list__item {
    background: $-dark-background2;
  }

  .title {
    color: $-dark-color;
  }

  :deep(.wd-cell__label) {
    color: $-dark-color3 !important;
  }

  .kind-list__img {
    filter: invert(100%);
  }
}

.page__hd {
  padding: 40px 40px 30px;
  margin-bottom: 30px;
  background: #fff;
}

.page__title {
  text-align: left;
  font-size: 20px;
  font-weight: 400;
  color: #0083ff;
}

.page__desc {
  margin-top: 20px;
  color: #999;
  text-align: left;
  font-size: 12px;
}

.page__bd {
  padding: 0 15px 30px 20px;
  user-select: none;
}

.logo {
  display: inline-block;
  margin-right: 14px;
  width: 40px;
  height: 40px;
  background: url('')
    no-repeat;
  background-size: cover;
  vertical-align: middle;
}

.inline {
  display: inline-block;
  vertical-align: middle;
}

.version {
  font-size: 14px;
}

.wd-cell_access {
  padding: 15px 20px;
}

.wd-cell__ft {
  padding-right: 16px;
  position: relative;
}

.wd-cells {
  position: relative;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-50%);
  transition: 0.3s;

  :deep(.wd-cell__label) {
    color: rgba(0, 0, 0, 0.65);
  }
}

.wd-cells_show {
  opacity: 1;
  transform: translateY(0);
}

.kind-list__item {
  border-radius: 30px;
  background: #fff;
  overflow: hidden;

  &:not(:last-child) {
    margin-bottom: 20px;
  }
}

.kind-list__img {
  width: 20px;
  height: 20px;
}

.kind-list__item-hd {
  padding: 15px 30px;
  transition: opacity 0.3s;
}

.kind-list__item-bd {
  height: 0;
  overflow: hidden;
}

.kind-list__item-bd_show {
  height: auto;
}

.wd-flex {
  display: flex;
}

.wd-flex__item {
  flex: 1;
}

.title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}

.page-name {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
}

.wd-tool-right-line-angle::after {
  content: ' ';
  display: inline-block;
  height: 8px;
  width: 8px;
  border-width: 2px 2px 0 0;
  border-color: #b2b2b2;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: relative;
  top: -2px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: 0;
}
</style>
